<template>
  <el-dialog :title="titleName" :visible.sync="dialogVisible" custom-class="custom_dialog" :close-on-click-modal="false"
             :modal-append-to-body="false" width="40%" :before-close="onClose">

    <div class="editContent">
      <el-form ref="role" :rules="roleRules" :model="role" label-width="100px" label-position="right">
        <el-row>
          <el-col :span="11">
            <el-form-item label="角色名称" class="form-item" prop="roleNm">
              <el-input v-model="role.roleNm" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item label="显示顺序" class="form-item" prop="roleSort">
              <el-input-number v-model="role.roleSort" :min="1" :max="100" label="显示顺序" clearable></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="角色状态" class="form-item" prop="roleStatus">
              <el-radio-group v-model="role.roleStatus" clearable>
                <el-radio :label="0">正常</el-radio>
                <el-radio :label="1">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div style="text-align: center">
      <el-button type="danger" @click="onClose" icon="el-icon-close">取消</el-button>
      <el-button type="primary" @click="onSubmit('role')" icon="el-icon-check">提交</el-button>
    </div>

  </el-dialog>
</template>

<script>
  import api from '@/api/sysRole'

  export default {
    name: 'role-edit',
    data() {
      return {
        titleName: '',
        dialogVisible: false,
        role: {},
        roleRules: {
          roleNm: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
          roleSort: [{ required: true, message: '请选择角色状态', trigger: 'blur' }],
          roleStatus: [{ required: true, message: '请输入显示顺序', trigger: 'blur' }]
        }
      }
    },

    methods: {
      // 打开界面
      open(status, id) {
        if (status === 'add') {
          this.titleName = '新增角色'
        }
        if (status === 'edit') {
          this.titleName = '编辑角色'
          this.getRoleById(id)
        }
        this.dialogVisible = true
      },
      // 提交
      onSubmit(role) {
        var me = this
        this.$refs[role].validate((valid) => {
          if (valid) {
            if (this.titleName === '新增角色') {
              api.insertRole(me.role).then(response => {
                if (response.status === 200) {
                  me.$message({ message: response.msg, type: 'success' })
                  me.onClose()
                } else {
                  me.$message({ message: response.msg, type: 'error' })
                }
              }).catch(() => {
              })
            }

            if (this.titleName === '编辑角色') {
              api.updateRole(me.role).then(response => {
                if (response.status === 200) {
                  me.$message({ message: response.msg, type: 'success' })
                  me.onClose()
                } else {
                  me.$message({ message: response.msg, type: 'error' })
                }
              }).catch(() => {
              })
            }

          } else {
            return false
          }
        })
      },
      // 根据ID查询角色信息
      getRoleById(id) {
        var me = this
        api.getRoleById({ id: id }).then(response => {
          if (response.status === 200) {
            me.role = response.data
          } else {
            me.$message({ message: response.msg, type: 'error' })
          }
        }).catch(() => {
        })
      },
      // 关闭/取消
      onClose() {
        // 清空表单
        this.$refs['role'].resetFields()
        this.menu = {}
        this.titleName = ''
        //清空校验数据
        this.$refs['role'].clearValidate()
        this.dialogVisible = false
        this.$emit('closeHide', false)
      }
    }
  }
</script>

<style scoped>
</style>
